<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            font-family: '微软雅黑';
            background-color: #f7f7f7;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .wrapper{
            width: 1024px;
            margin: 0 auto;
        }
        .wrapper > section{
            min-height: 300px;
            margin-bottom: 30px;
            box-shadow: 1px 1px 4px #DDD;
            background-color: #fff;
        }
        .wrapper > header{
            text-align: center;
            line-height: 1;
            padding: 20px;
            margin-bottom: 10px;
            font-size: 30px;
        }
        .wrapper section > header{
            line-height: 1;
            padding: 10px;
            font-size: 22px;
            color: #333;
            background-color: #EEE;
        }
        .wrapper .wrap-box{
            padding: 20px;
        }

        form{
            width: 300px;
            height: 300px;
            margin: 0 auto;
        }

        form input[type="text"]{
            width: 200px;
            height: 30px;
        }

        form input[type="password"]{
            width: 200px;
            height: 30px;
        }

        .download{

        }

        .attr1 a[href="./a.rmvb"]{
            color: red;
        }

        .attr1 a[href="./b.rmvb"]{
            color: pink;
        }

        /* E[~=] 表示的一个单独的属性值 这个属性值是以空格分隔的 */
        .attr2 a[class~="download"]{
            color: red;
        }

        /* E[|=] 表示的要么一个单独的属性值 要么这个属性值是以"-"分隔的 */
        .attr3 a[class|="download"]{
            color: red;
        }

        /*E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置 */
        .attr4 a[class*="download"]{
            color: red;
        }

        /*E[attr*=val] 表示的属性值包含val字符并且在“开始”位置 */
        .attr5 a[class^="download"]{
            color: red;
        }

        /*E[attr$=val] 表示的属性值包含val字符并且在“结束”位置 */
        .attr6 a[class$="download"]{
            color: red;
        }

    </style>
</head>
<body>
    <div class="wrapper">
        <header>CSS3-属性选择器</header>
        <!--分隔线-->
        <section>
            <header>简介</header>
            <div class="wrap-box">
                <form action="">
                    <ul>
                        <li>姓名：<input type="text"></li>
                        <li>密码：<input type="password"></li>
                        <li>
                            性别：<input type="radio">男
                            性别：<input type="radio">女
                        </li>
                        <li>兴趣：<input type="checkbox"> 写代码</li>
                        <li> <input type="submit"> 提交</li>
                    </ul>
                </form>
            </div>
        </section>
        <section class="attr1">
            <header>E[attr]</header>
            <div class="wrap-box">
               <a href="./a.rmvb" class="download download-movie">下载</a>
               <a href="./b.rmvb" class="download download-music">下截</a>
               <a href="./a.mp3" class="download download-music">下截</a>
            </div>
        </section>
        <section class="attr2">
            <header>E[attr~=val]</header>
            <div class="wrap-box">
                <a href="./a.rmvb" class="download download-movie">下载</a>
                <a href="./b.rmvb" class="download download-music">下截</a>
                <a href="./a.mp3" class="download download-music">下截</a>
            </div>
        </section>
        <section  class="attr3">
            <header>E[attr|=val]</header>
            <div class="wrap-box">
                <a href="./a.rmvb" class="download">下载</a>
                <a href="./b.rmvb" class="download-movie">下截</a>
                <a href="./a.mp3" class="download-music">下截</a>
            </div>
        </section>
        <section class="attr4">
            <header>E[attr*=val]</header>
            <div class="wrap-box">
                <a href="./a.rmvb" class="download">下载</a>
                <a href="./b.rmvb" class="moviedownload">下截</a>
                <a href="./a.mp3" class="downloadmusic">下截</a>
            </div>
        </section>
        <section class="attr5">
            <header>E[attr^=val]</header>
            <div class="wrap-box">
                <a href="./a.rmvb" class="download">下载</a>
                <a href="./b.rmvb" class="moviedownload">下截</a>
                <a href="./a.mp3" class="downloadmusic">下截</a>
            </div>
        </section>
        <section class="attr6">
            <header>E[attr$=val]</header>
            <div class="wrap-box">
                <a href="./a.rmvb" class="download">下载</a>
                <a href="./b.rmvb" class="moviedownload">下截</a>
                <a href="./a.mp3" class="downloadmusic">下截</a>
            </div>
        </section>

    </div>
</body>
</html>